<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>
<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>
<div class="main-content">

	<%@ include file="../include/navigate.jsp"%>

	<div class="container">
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-2">
					<div class="title">
						<i class="icon-edit">&nbsp;</i>从模板新建作业
					</div>
				</div>
			</div>
			
			<div class="widget-box-content" style="padding: 15px;">
				<c:if test="${not empty message}">
					<div class="alert alert-danger" role="alert">${message}</div>
				</c:if>
				
				<div id="saveStatus"></div>
				
				<form class="form-horizontal" role="form" method="post" onsubmit="return copyEditorContent() && doInputCheck();" action="${pageContext.request.contextPath}/template_para/createJobFromTemp">
					<div class="form-group">
						<label class="col-sm-2 control-label">作业名称:</label>

						<div class="col-sm-6">
							<input type="hidden" name="createFromTemplate" value="${templateId}">
							<input type="text" class="form-control" name="jobName" placeholder="作业名称" data-toggle="tooltip" data-placement="left" required="">
						</div>
					</div>
					<c:forEach items="${templateParams}" var="templateParam">
						<c:if test="${templateParam.paramType != 'MultiThreadTaskSetting'}">
							<div class="form-group">
								<label class="col-sm-2 control-label">${templateParam.paramDisplayName}:</label>
		 
								<div class="col-sm-6">
									<c:choose>  
									    <c:when test="${templateParam.paramType == 'connection'}">
									    	<select class="form-control" name="paramId_${templateParam.paramId}">
												<c:forEach items="${allConnections}" var="connection">
													<c:if test="${connection.connectionName == templateParam.defaultValue}">
														<option value="${connection.connectionId}" selected="selected">${connection.connectionName}</option>
													</c:if>
													<c:if test="${connection.connectionName != templateParam.defaultValue}">
														<option value="${connection.connectionId}">${connection.connectionName}</option>
													</c:if>
												</c:forEach>
											</select>
									    </c:when>
									    
									    <c:when test="${templateParam.paramType == 'date'}">
										    <input class="form-control" id="id-date-picker" name="paramId_${templateParam.paramId}" type="text" data-date-format="yyyy-mm-dd" data-provide="datepicker" value="${templateParam.defaultValue}"></input>
									    </c:when>
									    
									    <c:when test="${templateParam.paramType == 'time'}">
									    	<input id="date-timepicker" type="text" name="paramId_${templateParam.paramId}" class="form-control date-timepicker" value="${templateParam.defaultValue}"></input>
									    </c:when>
									    
									    <c:when test="${templateParam.paramType == 'int'}">
									    	<input id="" type="text" name="paramId_${templateParam.paramId}" class="form-control input-mask-number" value="${templateParam.defaultValue}"></input>
									    </c:when>
									    
									    <c:when test="${templateParam.paramType == 'text'}">
									    	<input type="text" class="" name="paramId_${templateParam.paramId}" style="width:100%;" value="${templateParam.defaultValue}"> 
									    </c:when>
									    
									    <c:when test="${templateParam.paramType == 'sql'}">
									    	<pre class="editor" id="editor_${templateParam.paramId}" style="height:300px" name="editor_${templateParam.paramId}"></pre>
									    	<input id="value_editor_${templateParam.paramId}" type="hidden" name="paramId_${templateParam.paramId}">
									    </c:when>
									    
									    <c:otherwise>
									    	<input type="text" class="" name="paramId_${templateParam.paramId}" style="width:100%;">
									    </c:otherwise>  
									</c:choose> 
								</div>
								
								<div class="col-sm-4 control-label" id="tips_paramId_${templateParam.paramId}" style="text-align:left;">${templateParam.paramDes}</div>
							</div>
						</c:if>
					</c:forEach> 
					
					<div class="form-group">
	                    <label class="col-sm-2 control-label">是否分割此任务:</label>
	 
	                    <div class="col-sm-6 checkbox"  style="margin-left:15px;">
							<input name="isSplit" type="checkbox" />
	                    </div>
	                </div>
	                
	                <div class="form-group splitParam" style="display:none">
	                    <label class="col-sm-2 control-label">分割范围:</label>
	 
	                    <div class="col-sm-3">
					    	<input type="text" class="form-control" name="startDate" id="startDate" value="2015-01-01" />
	                    </div>
	                    <div class="col-sm-3">
					    	<input type="text" class="form-control" name="endDate" id="endDate" value="2015-09-01">
	                    </div>
	                </div>
	                
	                <div class="form-group splitParam" style="display:none">
	                    <label class="col-sm-2 control-label">单个任务任务量（天）:</label>
	 
	                    <div class="col-sm-6">
					    	<input type="text" class="form-control" name="taskLoad" placeholder="单个任务任务量" data-toggle="tooltip" data-placement="left">
	                    </div>
	                </div>
	                
	                <div class="form-group splitParam" style="display:none">
	                    <label class="col-sm-2 control-label">并发执行数:</label>
	 
	                    <div class="col-sm-6">
					    	<input type="text" class="form-control" name="threadNumber" placeholder="并发执行数（推荐设置：4-8）" data-toggle="tooltip" data-placement="left">
	                    </div>
	                </div>
					
					<div class="form-group">
	                    <label class="col-sm-2 control-label">备注:</label>
	 
	                    <div class="col-sm-6">
							<textarea name="note" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: vertical;"></textarea>
	                    </div>
	                </div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label"></label>

						<div class="col-sm-6"> 
							<button type="submit" class="btn btn-success" >生成作业，GO！</button>
							<a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/EtlXml/list"> 返回列表
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>

	<script type="text/javascript">
		$('.datepicker').datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'});
		$('.date-timepicker').datetimepicker({locale: 'zh-cn', format: 'yyyy-mm-dd HH:mm:ss'});
		
		$('.input-mask-number').inputmask('9{0,}', {
			onincomplete : function() {
				$('#port_tips').prop("hidden", false);
			},
			oncomplete : function() {
				$('#port_tips').prop("hidden", true);
			},
			clearMaskOnLostFocus: false,
			insertMode: true
		});
		
		$('#startDate').datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'});
		$('#endDate').datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'});
		
		$("input[name='isSplit']").bind("click", function () {
            if($("input[name='isSplit']").prop("checked")){
            	$(".splitParam").show();
            } else {
            	$(".splitParam").hide();
            }
        });
		
		var editors = new Array();
		$(".editor").each(function(index, element){
			var editor = ace.edit($(element).attr("id"));
		    editor.session.setMode("ace/mode/sql");
		    
		    editors.push({"id": $(element).attr("id"), "editor": editor});
		});
		
		function copyEditorContent(){
			for(index in editors){
				$("#value_" + editors[index].id).val(editors[index].editor.getValue());
			}
			
			return true;
		}
		
		function doInputCheck(){
			if($("input[name='isSplit']").prop("checked")){
				for(index in editors){
					var editorContent = editors[index].editor.getValue();
					if(editorContent.indexOf("&startDate") < 0 || editorContent.indexOf("&endDate") < 0){
						$("#tips_paramId_" + editors[index].id.replace("editor_", "")).html("分割作业时，sql定义中必须使用变量&startDate和&endDate").css("color","red").show();
						return false;
					}
				}
			}
			
			return true;
		}
	</script>

	<%@ include file="../include/bottom.jsp"%>